<script setup>
import HeaderMenu from "@/components/HeaderMenu.vue";
import FooterComponent from "@/components/FooterComponent.vue";
import SearchGoods from "@/components/SearchGoods.vue";
import {getOrder} from "@/api/goods.js";
import {ElMessage} from "element-plus";
import {onMounted,ref} from "vue";

onMounted(()=>{
  getOrderList()
})
//查询所有订单
let orderList = ref([]);
const getOrderList = async () => {
  let result = await getOrder();
  if (result.data.code === 200) {
    ElMessage.success("查询订单成功")
    console.log(result.data.data)
    orderList.value = result.data.data;
  }else {
    ElMessage.error("查询订单失败")
  }
}
const tableData = ref([])

</script>

<template>
  <div>
    <HeaderMenu></HeaderMenu>
    <SearchGoods></SearchGoods>

    <div>
      <el-table header-row-class-name="custom-header" :data="orderList" style="width: 100%" stripe height="350" class="my-table">
        <el-table-column fixed prop="id" label="订单序号" width="180" />
        <el-table-column prop="goodsname" label="商品名称" width="180" />
        <el-table-column prop="number" label="数量" width="180" />
        <el-table-column prop="price" label="价格" width="180" />
        <el-table-column prop="uid" label="用户账号" width="180"  />
        <el-table-column prop="time" label="购买时间" width="600" />
      </el-table>
    </div>

    <FooterComponent class="footerComponent"></FooterComponent>
  </div>
</template>

<style scoped>
.footerComponent {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.my-table {
  padding: 40px;
}

.custom-header {
  background-color: #3c6efd;
}
</style>
